<!doctype html>
<html class="no-js" lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title>积分商城</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- Place favicon.ico in the root directory -->
        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/main.css">
        <link rel="stylesheet" href="js/layui/css/layui.css">
        <script src="js/layui/layui.js"></script>
        <link rel="stylesheet" href="css/swiper.min.css">
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body >
    <div class="index">
        <div  class="mian layui-carousel layui-col-xs12 layui-col-sm12 layui-col-md12" id="app">
            <div class="layui-row tl-top">
                <div class="layui-col-xs1 layui-col-sm1 layui-col-md1 tl-leftalign">
                    <img src="img/img/icon_back.png"/>
                </div>
                <div class="layui-col-xs10 layui-col-sm10 layui-col-md10 tl-align">
                    积分商城
                </div>
                <div class="layui-col-xs1 layui-col-sm1 layui-col-md1 tl-rightalign">

                </div>
            </div>
            <div class="top" >
                <div class="searchBox" >
                    <input type="text" class="search" placeholder="搜索"/>
                    <span class="layui-icon nexIcon searchIcon">&#xe615; </span>
                </div>
            </div>
            <div class="cent">
                <div class="apple-banner">
                    <div class="swiper-container">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide slide1">
                                <img src="img/iphone_large.jpg"/>
                                <div class="title txt"> iPhone <br>
                                    7  在此 </div>
                            </div>
                            <div class="swiper-slide slide2">
                                <img src="img/arrows.png" />
                                <div class="title txt">  </div>
                                <h2 class="homepage-headline txt">Series 2 新登场。</h2>
                            </div>
                            <div class="swiper-slide slide3">
                                <img src="img/macbookpro_large.jpg" />
                                <div class="title txt">
                                    <p> 一身才华，一触即发 </p>
                                </div>
                            </div>
                        </div>
                        <div class="swiper-button-prev"><span class="layui-icon nexIcon">&#xe602;</span></div>
                        <div class="swiper-button-next"><span class="layui-icon nexIcon">&#xe603;</span></div>
                        <ul class="swiper-pagination autoplay">
                        </ul>
                    </div>
                </div>
                <div class="myIntegralBox layui-row">
                    <div class="layui-row boxIntegral">
                        <div class="layui-col-xs8 layui-col-sm8 layui-col-md8">
                            <div class="myIntegral">
                                <span class="lable">我的积分：</span><span class="red">100000</span>
                            </div>
                        </div>
                        <div class="layui-col-xs4 layui-col-sm4 layui-col-md4">
                            <div class="chartIntegral">
                                <span class="lableRight">积分明细</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="activity ">
                    <div class="activityTitle layui-row">
                        <div class="layui-col-xs6 layui-col-sm6 layui-col-md6 layui-col-xs-offset3">
                            <p >积/分/活/动</p>
                        </div>
                        <div class="layui-col-xs3 layui-col-sm3 layui-col-md3 ">
                            <P class="More">更多<span > <img src="img/img/btn_more.png"  class="more"/> </span></P>
                        </div>
                    </div>
                    <div class="activityCent layui-row">
                        <div class="boder layui-col-xs8 layui-col-sm8 layui-col-md8 ">
                            <div class=" ">
                                <div class="layui-col-xs6 layui-col-sm6 layui-col-md6 layui-row">
                                    <div class="activityText">
                                        <p >积分抽奖</p>
                                        <p class="commodity">1积分抽取爆品</p>
                                    </div>
                                </div>
                                <div class="layui-col-xs6 layui-col-sm46 layui-col-md6 layui-row">
                                    <div class="boxActivityCent">
                                        <div class="imgBoxs" style="margin-top: 20%">
                                            <img src="img/img/Turntable.png"/>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="boder layui-col-xs4 layui-col-sm4 layui-col-md4">
                            <div class="boxActivityCent">
                                <div class="ActivityTitle">
                                    <P>新品推荐</P>
                                    <P class="commodity">电动牙刷</P>
                                </div>
                                <div class="ActivityImg">
                                    <div class="imgBoxs">
                                        <img src="img/img/yashua.png"/>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="boder layui-col-xs4 layui-col-sm4 layui-col-md4">
                            <div class="boxActivityCent">
                                <div class="ActivityTitle">
                                    <P>必抢清单</P>
                                    <P class="commodity">电动牙刷电动牙刷电动牙刷电动牙刷</P>
                                </div>
                                <div class="ActivityImg">
                                    <div class="imgBoxs">
                                        <img src="img/img/bheizhi.png"/>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="boder layui-col-xs4 layui-col-sm4 layui-col-md4">
                            <div class="boxActivityCent">
                                <div class="ActivityTitle">
                                    <P>爆款推荐</P>
                                    <P class="commodity">电动牙刷</P>
                                </div>
                                <div class="ActivityImg">
                                    <div class="imgBoxs">
                                        <img src="img/img/yashua.png"/>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="boder layui-col-xs4 layui-col-sm4 layui-col-md4">
                            <div class="boxActivityCent">
                                <div class="ActivityTitle">
                                    <P>新品推荐</P>
                                    <P class="commodity">电动牙刷</P>
                                </div>
                                <div class="ActivityImg">
                                    <div class="imgBoxs">
                                        <img src="img/img/lanya.png"/></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="list">
                    <div class="listTitle layui-row">
                        <div class="listTitleBoder layui-col-xs3 layui-col-sm3 layui-col-md3">
                            <p>最新 <img src="img/img/icon_shouqi.png" /></i></p>
                        </div>
                        <div class="listTitleBoder layui-col-xs3 layui-col-sm3 layui-col-md3">
                            <p>人气 <img src="img/img/icon_zhankai.png" /></i></p>
                        </div>
                        <div class="listTitleBoder layui-col-xs3 layui-col-sm3 layui-col-md3">
                            <p> 积分 <i ><img src="img/img/icon_zhankai.png" /></i></p>
                        </div>
                        <div class="layui-col-xs3 layui-col-sm3 layui-col-md3">
                            <p>刷选 <i ><img src="img/img/icon_shaixuan.png" /> </i></p>
                        </div>
                    </div>
                    <div class="listTop layui-row">
                        <div class="span2">
                            <div class="imgBoxs">
                                <img src="img/img/icon_shuma.png"/>
                            </div>
                            <p class="listTypes"> 数码 </p>
                        </div>
                        <div class="span2">
                            <div class="imgBoxs">
                                <img src="img/img/icon_jiaju.png"/>
                            </div>
                            <p class="listTypes"> 家属 </p>
                        </div>
                        <div class="span2">
                            <div class="imgBoxs">
                                <img src="img/img/icon_lipin.png"/>
                            </div>
                            <p class="listTypes"> 礼品 </p>
                        </div>
                        <div class="span2">
                            <div class="imgBoxs">
                                <img src="img/img/icon_muying.png"/>
                            </div>
                            <p class="listTypes"> 母婴 </p>
                        </div>
                        <div class="span2">
                            <div class="imgBoxs">
                                <img src="img/img/icon_kaquan.png"/>
                            </div>
                            <p class="listTypes"> 卡券 </p>
                        </div>
                    </div>
                </div>
                <div class="listCent layui-row ">
                    <div class=" layui-col-xs6 layui-col-sm6 layui-col-md6">
                        <div class="card">
                            <div class="imgBoxs">
                                <img src="img/img/bheizhi.png"/>
                            </div>
                            <div class="text">
                                <p class="name">电动牙刷电动牙刷电动牙刷电动牙刷电动牙刷</p>
                                <p> <span class="redNumber">100000电动牙刷电动牙刷电动牙刷电动牙刷电动牙刷</span> <span>积分</span></p>
                                <p> <span>参考市场价：</span> <span>100000电动牙刷电动牙刷电动牙刷电动牙刷电动牙刷</span> </p>
                            </div>
                        </div>
                    </div>
                    <div class=" layui-col-xs6 layui-col-sm6 layui-col-md6">
                        <div class="card">
                            <div class="imgBoxs">
                                <img src="img/img/bheizhi.png"/>
                            </div>
                            <div class="text">
                                <p class="name">电动牙刷</p>
                                <p> <span class="redNumber">100000</span> <span>积分</span></p>
                                <p> <span>参考市场价：</span> <span>100000</span> </p>
                            </div>
                        </div>
                    </div>
                    <div class=" layui-col-xs6 layui-col-sm6 layui-col-md6">
                        <div class="card">
                            <div class="imgBoxs">
                                <img src="img/img/bheizhi.png"/>
                            </div>
                            <div class="text">
                                <p class="name">电动牙刷</p>
                                <p> <span class="redNumber">100000</span> <span>积分</span></p>
                                <p> <span>参考市场价：</span> <span>100000</span> </p>
                            </div>
                        </div>
                    </div>
                    <div class=" layui-col-xs6 layui-col-sm6 layui-col-md6">
                        <div class="card">
                            <div class="imgBoxs">
                                <img src="img/img/bheizhi.png"/>
                            </div>
                            <div class="text">
                                <p class="name">电动牙刷</p>
                                <p> <span class="redNumber">100000</span> <span>积分</span></p>
                                <p> <span>参考市场价：</span> <span>100000</span> </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer layui-row">
            <div class="listTop layui-row">
                <div class="span2">
                    <div class="imgBoxs">
                        <img src="img/img/icon_tab_shop_selected.png"/>
                    </div>
                    <p class="listTypes"> 商店 </p>
                </div>
                <div class="span2">
                    <div class="imgBoxs">
                        <img src="img/img/icon_tab_fenlei_select.png"/>
                    </div>
                    <p class="listTypes"> 分类 </p>
                </div>
                <div class="span2" style=" position: relative;height:10px">
                    <div class="imgBoxs shopping">
                        <img src="img/img/btn_tab_shopping_select.png"/>
                    </div>
                </div>
                <div class="span2">
                    <div class="imgBoxs">
                        <img src="img/img/icon_tab_team_select.png"/>
                    </div>
                    <p class="listTypes"> 团队 </p>
                </div>
                <div class="span2">
                    <div class="imgBoxs">
                        <img src="img/img/icon_tab_my_select.png"/>
                    </div>
                    <p class="listTypes"> 我的 </p>
                </div>
            </div>
        </div>
    </div>

    <script src="js/swiper.min.js"></script>
    <script src="js/apple.js"></script>
        <script>
            layui.use(['carousel', 'form'], function(){
                var layer = layui.layer,
                 carousel = layui.carousel,
                    form = layui.form;
                layer.msg('开始我们的代码开发');
                carousel.render({
                    elem: '#test1',
                    arrow: 'always',
                    width: '100%',
                    height: '200px'
                });
            });
        </script>
    </body>
</html>
